WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > MVVM API > Worked Example - Styling Annotations in MVVM
Worked Example - Styling Annotations in MVVM

Annotation can be styled in MVVM by registering a style in XAML and referencing it from the ViewModel.

To do this, you need to declare a Style (TargetType = TextAnnotation, or your chosen annotation type) in XAML and give it a key. Next, set the TextAnnotationViewModel.StyleKey property equal to the key in XAML. Scichart picks it up and applies the style automatically to the annotation!

View (XAML)

Stying Annotations in MVVM
Copy Code 
<Window x:Class="StyingAnnotationsMVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        xmlns:local="clr-namespace:StyingAnnotationsMVVM"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <local:MainWindowViewModel x:Key="viewModel"/>
        <Style x:Key="TextAnnotationStyle" TargetType="{x:Type s:TextAnnotation}">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="BorderBrush" Value="Orange"/>
            <Setter Property="BorderThickness" Value="1"/>
        </Style>
        <Style x:Key="AnchorTextAnnotationStyle" TargetType="{x:Type s:TextAnnotation}">
            <Setter Property="Foreground" Value="Blue"/>
            <Setter Property="BorderBrush" Value="#AA0000FF"/>
            <Setter Property="BorderThickness" Value="1"/>
        </Style>
        <Style x:Key="TooltipLineAnnotationStyle" TargetType="{x:Type s:LineAnnotation}">
            <Setter Property="Stroke" Value="Chartreuse"/>
            <Setter Property="StrokeThickness" Value="2"/>
        </Style>
        <Style x:Key="HorizontalLineAnnotationStyle" TargetType="{x:Type s:HorizontalLineAnnotation}">
            <Setter Property="Stroke" Value="Orange" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="ShowLabel" Value="True" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="IsEditable" Value="True" />
        </Style>
        <Style x:Key="VerticalLineAnnotationStyle" TargetType="{x:Type s:VerticalLineAnnotation}">
            <Setter Property="Stroke" Value="Brown" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="IsEditable" Value="True" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
        <Style x:Key="LineArrowAnnotationStyle" TargetType="{x:Type s:LineArrowAnnotation}">
            <Setter Property="Stroke" Value="Cyan" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="HeadWidth" Value="8" />
            <Setter Property="HeadLength" Value="4" />
        </Style>
        <Style x:Key="BoxAnnotationStyle" TargetType="{x:Type s:BoxAnnotation}">
            <Setter Property="Background" Value="LawnGreen" />
            <Setter Property="BorderBrush" Value="DarkGreen" />
            <Setter Property="BorderThickness" Value="5" />
            <Setter Property="CornerRadius" Value="3" />
            <Setter Property="IsEditable" Value="True" />
        </Style>
        <Style x:Key="AxisMarkerAnnotationStyle" TargetType="{x:Type s:AxisMarkerAnnotation}">
            <Setter Property="Background" Value="Red" />
            <Setter Property="IsEditable" Value="True" />
        </Style>
    </Window.Resources>

    <Grid DataContext="{StaticResource viewModel}">
        <s:SciChartSurface x:Name="sciChart"
                           Grid.Column="1"
                           Annotations="{s:AnnotationsBinding AnnotationViewModels}"
                           Padding="0">
            <s:SciChartSurface.RenderSurface>
                <s:HighQualityRenderSurface/>
            </s:SciChartSurface.RenderSurface>
            <s:SciChartSurface.XAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.YAxis>
        </s:SciChartSurface>
    </Grid>
</Window>

ViewModel

Stying Annotations in MVVM
Copy Code 
    public class MainWindowViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<IAnnotationViewModel> AnnotationViewModels { get; set; }
        public MainWindowViewModel()
        {
            AnnotationViewModels = new ObservableCollection<IAnnotationViewModel>();
            InitializeAnnotations();
        }
        private void InitializeAnnotations()
        {
            AnnotationViewModels.Add(new TextAnnotationViewModel
            {
                Text = "Annotations are Easy!",
                FontSize = 24,
                X1 = 0.3,
                Y1 = 9.7,
                StyleKey = "TextAnnotationStyle",
            });
            // Text with anchor points
            AnnotationViewModels.Add(new TextAnnotationViewModel
            {
                HorizontalAnchorPoint = HorizontalAnchorPoint.Center,
                Text = "Anchor Center (X1, Y1)",
                VerticalAnchorPoint = VerticalAnchorPoint.Bottom,
                X1 = 5.0,
                Y1 = 8,
                StyleKey = "AnchorTextAnnotationStyle",
            });
            AnnotationViewModels.Add(new TextAnnotationViewModel
            {
                HorizontalAnchorPoint = HorizontalAnchorPoint.Right,
                Text = "Anchor Right",
                VerticalAnchorPoint = VerticalAnchorPoint.Top,
                X1 = 5.0,
                Y1 = 8.0,
                StyleKey = "AnchorTextAnnotationStyle",
            });
            AnnotationViewModels.Add(new TextAnnotationViewModel
            {
                HorizontalAnchorPoint = HorizontalAnchorPoint.Left,
                VerticalAnchorPoint = VerticalAnchorPoint.Top,
                Text = "or Anchor Left",
                X1 = 5.0,
                Y1 = 8.0,
                StyleKey = "AnchorTextAnnotationStyle",
            });
            AnnotationViewModels.Add(new LineAnnotationViewModel
            {
                X1 = 1,
                X2 = 2,
                Y1 = 4,
                Y2 = 6,
                Tooltip = "Hi, I am tooltip!",
                StyleKey = "TooltipLineAnnotationStyle",
            });
            AnnotationViewModels.Add(new HorizontalLineAnnotationViewModel
            {
                HorizontalAlignment = HorizontalAlignment.Right,
                LabelPlacement = LabelPlacement.TopLeft,
                LabelValue = "Right Aligned, with text on left",
                X1 = 5,
                X2 = 6,
                Y1 = 3.2,
                StyleKey = "HorizontalLineAnnotationStyle",
            });
            AnnotationViewModels.Add(new VerticalLineAnnotationViewModel
            {
                VerticalAlignment = VerticalAlignment.Stretch,
                LabelValue = "Vertical Line, hello everybody",
                LabelPlacement = LabelPlacement.Bottom,
                X1 = 9,
                Y1 = 4,
                StyleKey = "VerticalLineAnnotationStyle",
            });
            AnnotationViewModels.Add(new LineArrowAnnotationViewModel
            {
                X1 = 1.2,
                X2 = 2.5,
                Y1 = 3.8,
                Y2 = 6,
                StyleKey = "LineArrowAnnotationStyle",
            });
            AnnotationViewModels.Add(new BoxAnnotationViewModel
            {
                X1 = 2,
                X2 = 5,
                Y1 = 0.5,
                Y2 = 1.5,
                StyleKey = "BoxAnnotationStyle",
            });
            AnnotationViewModels.Add(new AxisMarkerAnnotationViewModel
            {
                X1 = 4,
                Y1 = 3,
                StyleKey = "AxisMarkerAnnotationStyle",
            });
        }
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }